﻿<!DOCTYPE HTML>
<html>
    <head>
        <title>Virtual Radar - Aircraft List Diagnostics</title>
        <script type="text/javascript" src="jQuery-1.6.4.js"></script>
        <style type="text/css">
            body                    { font-family: Segoe UI, Sans-Serif; font-size: smaller; }
            #containerOuter         { height: 100%; }
            #containerInner         { }
            #parametersPanelOuter   { }
            #parametersPanelInner   { }
            .inputFormTable         { }
            .resultTable            { width: 100%; }
            .resultTableInner       { width: 100%; }
        </style>
    </head>
    <body>
        <div id="containerOuter">
            <div id="containerInner">
                <div id="parametersPanelOuter">
                    <div id="parametersPanelInner">
                        <form id="parameters" action="#">
                            <table class="inputFormTable">
                                <tr><td>Latitude:</td><td><input id="paramLatitude" type="text" size="20" /></td>
                                    <td>Longitude:</td><td><input id="paramLongitude" type="text" size="20" /></td></tr>
                                <tr><td>Previous data version:</td><td><input id="paramPreviousDataVersion" type="text" size="20" /></td>
                                    <td>Copy from a/c list</td><td><input id="paramAutoUpdatePreviousDataVersion" type="checkbox" checked="checked" /></td>
                                </tr>
                                <tr><td>Resend trails:</td><td><input id="paramResendTrails" type="checkbox" /></td>
                                    <td>Send short trails:</td><td><input id="paramSendShortTrails" type="checkbox" /></td></tr>
                                <tr><td>Known aircraft ids:</td><td colspan="3"><input id="paramAircraftIds" type="text" size="100" /></td></tr>
                                <tr><td>Copy ids from a/c list:</td><td><input id="paramAutoUpdateAircraftIds" type="checkbox" checked="checked" /></td>
                                    <td></td><td><input id="sendRequest" type="submit" value="Send Request" /></td></tr>
                            </table>
                        </form>
                    </div>
                </div>
                <div id="resultPanelOuter">
                    <div id="resultPanelInner">
                        <div id="result"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>

    <script type="text/javascript">
        $(document).ready(function(){
            $('#parameters').submit(function() {
                sendRequest();
                return false;
            });
        });

        function sendRequest()
        {
            var data = {};
            data.lat = parameters.paramLatitude.value;
            data.lng = parameters.paramLongitude.value;
            data.ldv = parameters.paramPreviousDataVersion.value;
            data.refreshTrails = parameters.paramResendTrails.checked ? '1' : undefined;
            data.trFmt = parameters.paramSendShortTrails.checked ? 'S' : undefined;

            var headers = {
                "X-VirtualRadarServer-AircraftIds": parameters.paramAircraftIds.value
            };

            $.ajax("AircraftList.json", {
                data: data,
                dataType: "json",
                headers: headers,
                error: function(jqXHR, textStatus, errorThrown) {
                    displayFailure(jqXHR, textStatus, errorThrown);
                },
                success: function(data) {
                    displayResult(data);
                },
                beforeSend: function(jqXHR, settings) {
                    return true;
                }
            });
        };

        function displayFailure(jqXHR, textStatus, errorThrown)
        {
            $('#result').text('Failed to retrieve aircraft list, ' + textStatus + ' (' + errorThrown + ')');
        };

        function displayResult(listAndState)
        {
            var html = '';

            html += '<table class="resultTable">';

            for(var propName in listAndState) {
                if(propName == 'acList') continue;
                html += displayFieldValue(propName, listAndState[propName]);
            }

            html += displayAircraftList(listAndState.acList, findExpandedAircraft());

            html += '</table>';

            $('#result').html(html);

            $('.aircraftHeader').click(function() {
                $(this).next().toggle();
            });

            copyValuesBackToParameters(listAndState);
        };

        function findExpandedAircraft()
        {
            var result = [];

            $('.aircraftDetail:visible').each(function() {
                result.push($(this).attr('id'));
            });

            return result;
        };

        function displayAircraftList(aircraftList, expandedAircraft)
        {
            var html = '';

            for(var i = 0;i < aircraftList.length;++i) {
                var aircraft = aircraftList[i];

                var detailId = 'aircraftDetail_' + aircraft.Id;
                var style = $.inArray(detailId, expandedAircraft) == -1 ? 'style="display:none"' : '';

                html += '<tr class="aircraftHeader"><td colspan="2">' + i + ': ' + aircraft.Id + ' Icao: ' + aircraft.Icao + ' (Reg: ' + aircraft.Reg + ')</td></tr>';
                html += '<tr class="aircraftDetail" id="' + detailId + '" + ' + style + '><td colspan="2"><table class="resultTableInner">';
                for(var propName in aircraft) {
                    html += displayFieldValue(propName, aircraft[propName]);
                }
                html += '</table></td></tr>';
            }

            return html;
        };

        function displayFieldValue(name, value)
        {
            var html = '<tr>';
            html += '<td>' + name + '</td>';
            html += '<td>' + value + '</td>';
            html += '</tr>';

            return html;
        };

        function copyValuesBackToParameters(listAndState)
        {
            if(parameters.paramAutoUpdatePreviousDataVersion.checked) parameters.paramPreviousDataVersion.value = listAndState.lastDv;
            if(parameters.paramAutoUpdateAircraftIds.checked) {
                var ids = '';
                for(var i = 0;i < listAndState.acList.length;++i) {
                    if(ids.length !== 0) ids += ',';
                    ids += listAndState.acList[i].Id;
                }
                parameters.paramAircraftIds.value = ids;
            }
        };
    </script>
</html>